<script setup lang="ts">
import { $t } from '@renderer/locales'
import { useThemeStore } from '@renderer/store/modules/theme'
import Clipboard from 'clipboard'
import { computed, onMounted, ref } from 'vue'

defineOptions({
  name: 'ConfigOperation'
})

const themeStore = useThemeStore()

const domRef = ref<HTMLElement | null>(null)

function initClipboard() {
  if (!domRef.value) return

  const clipboard = new Clipboard(domRef.value)

  clipboard.on('success', () => {
    window.$message?.success($t('theme.configOperation.copySuccessMsg'))
  })
}

function getClipboardText() {
  const reg = /"\w+":/g

  const json = themeStore.settingsJson

  return json.replace(reg, (match) => match.replace(/"/g, ''))
}

function handleReset() {
  themeStore.resetStore()

  setTimeout(() => {
    window.$message?.success($t('theme.configOperation.resetSuccessMsg'))
  }, 50)
}

const dataClipboardText = computed(() => getClipboardText())

onMounted(() => {
  initClipboard()
})
</script>

<template>
  <div class="w-full flex justify-between">
    <textarea
      id="themeConfigCopyTarget"
      v-model="dataClipboardText"
      class="absolute opacity-0 -z-1" />
    <NButton type="error" ghost @click="handleReset">{{
      $t('theme.configOperation.resetConfig')
    }}</NButton>
    <div ref="domRef" data-clipboard-target="#themeConfigCopyTarget">
      <NButton type="primary">{{ $t('theme.configOperation.copyConfig') }}</NButton>
    </div>
  </div>
</template>

<style scoped></style>
